<template>
	<div class="popup-share">
		<button class="popup-share__btn" @click="open" v-if="bwbt_conf.isShare == 1 && showButton">
			分享有礼
		</button>

		<cl-popup direction="bottom" :visible.sync="visible" size="100%">
			<div class="popup-share__mask" @click="close"></div>

			<div class="popup-share__poster">
				<img :src="url" />
				<span class="popup-share__close cl-icon-round-close-fill" @click="close"></span>
			</div>

			<div class="popup-share__save" v-if="bwbt_conf.shareType == 1">
				<button @click="savePic">
					{{ app == 'wx' ? '长按保存图片' : '一键保存分享图片' }}
				</button>
			</div>

			<div class="popup-share__app" v-if="bwbt_conf.shareType == 3">
				<cl-divider width="400px">图文分享到</cl-divider>

				<div class="popup-share__platform">
					<div class="popup-share__platform-block" @click="toApp(5)">
						<img src="@/assets/2/icon/wechat.png" />
						<span>微信好友</span>
					</div>

					<div class="popup-share__platform-block" @click="toApp(9)">
						<img src="@/assets/2/icon/wechat2.png" />
						<span>朋友圈</span>
					</div>

					<div class="popup-share__platform-block" @click="toApp(8)">
						<img src="@/assets/2/icon/qq.png" />
						<span>QQ</span>
					</div>

					<div class="popup-share__platform-block" v-if="bwbt_userInfo.app == 'yzf'" @click="toApp(10)">
						<img src="@/assets/2/icon/qq-zone.png" />
						<span>QQ空间</span>
					</div>

					<div class="popup-share__platform-block" @click="savePic">
						<img src="@/assets/2/icon/download.png" />
						<span>一键保存</span>
					</div>
				</div>
			</div>
		</cl-popup>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { Toast } from 'vant';
import ClPopup from '@/components/popup';
import ClDivider from '@/components/divider';

export default {
	components: {
		ClPopup,
		ClDivider
	},

	props: {
		showButton: Boolean
	},

	data() {
		return {
			visible: false,
			loading: false,
			url: '',
			base64: ''
		};
	},

	computed: {
		...mapGetters(['bwbt_userInfo', 'bwbt_conf'])
	},

	methods: {
		open() {
			Toast.loading({
				message: '加载中'
			});

			this.$service.common.common
				.millionSharePic()
				.then(res => {
					this.url = res.url;
					this.base64 = res.base64;
					this.visible = true;
					Toast.clear();
				})
				.catch(err => {
					Toast.clear();
					Toast(err.message);
				});
		},

		close() {
			this.visible = false;
		},

		savePic() {
			if (this.app == 'wx') {
				return Toast('长按保存图片');
			}

			Toast('图片开始保存');

			window.BestpayHtml5.Storage.savePicture(
				{
					base64ImageStream: this.base64
				},
				() => {
					Toast('保存成功');
				},
				() => {
					Toast('保存失败');
				}
			);
		},

		toApp(action) {
			this.loading = true;

			let type = null;

			switch (action) {
				case 0:
					type = 'sina';
					break;
				case 5:
					type = 'weixin';
					break;
				case 8:
					type = 'qqFriend';
					break;
				case 9:
					type = 'weixinTimeline';
					break;
				case 10:
					type = 'qZone';
					break;
			}

			window.BestpayHtml5.Other.share(
				{
					imageData: this.base64,
					title: '',
					content: '',
					type,
					contentType: 'image'
				},
				res => {
					Toast('分享成功');

					this.close();

					// 分享回调
					this.$service.bwbt.bwbtUser.shareBwbt().then(() => {
						// 更新
						this.$store.dispatch('GET_BWBT_USERINFO');
					});

					// 完成任务
					this.$store.dispatch('finishTask', { sceneKey: 'shareFriend' });
				},
				err => {
					console.error(err);
					Toast('分享失败');
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-share {
	/deep/.cl-popup {
		background-color: transparent;

		&__container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 0;
		}

		&__modal {
			display: none;
		}
	}

	&__mask {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	&__btn {
		position: absolute;
		right: 0;
		top: 200px;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 6px 20px;
		margin: 0;
		border-radius: 30px 0 0 30px;
		z-index: 100;
		font-size: 24px;
		height: auto;
		line-height: normal;
		border: 0;

		&::after {
			border: 0;
		}
	}

	&__poster {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		position: relative;

		img {
			height: 898px;
			width: 584px;
			display: block;
		}
	}

	&__close {
		position: absolute;
		right: -25px;
		top: calc(50% - 485px);
		color: #fff;
		z-index: 999;
		font-size: 50px;
	}

	&__save {
		display: flex;
		justify-content: center;
		height: 150px;
		margin-top: 50px;

		button {
			display: inline-block;
			padding: 0 30px;
			margin: 0;
			font-size: 26px;
			background-color: #d05843;
			color: #fff;
			border-radius: 80px;
			height: 80px;
			line-height: 80px;
			box-sizing: border-box;
			border: 0;

			&::after {
				border: 0;
			}
		}
	}

	&__app {
		background-color: #fff;
		height: 250px;
		width: 100%;
		position: relative;
	}

	&__platform {
		display: flex;
		position: relative;

		&-block {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;

			img {
				height: 60px;
				width: 60px;
				margin-bottom: 10px;
			}

			span {
				font-size: 24px;
			}
		}
	}
}
</style>
